<template>
  <div>
    <el-dialog title="轮播图管理" :visible.sync="flag.isShow" @opened="opened" @closed="closed">
      <el-form :model="form">
        <el-form-item label="标题" label-width="120px">
          <el-input v-model="form.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="图片" label-width="120px">
          <my-upload @sendFile="sendFile" ref="upload"></my-upload>
        </el-form-item>
        <el-form-item label="状态" label-width="120px">
          <el-switch v-model="form.status" :active-value="1" :inactive-value="2"></el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="change" v-if="!flag.isAdd">修改</el-button>
        <el-button type="primary" @click="add" v-else>添加</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
import { bannerAdd, bannerEdit } from "../../../request/api";
import { errorAlert, successAlert } from "../../../utils/alert";
export default {
  data() {
    return {
      form: {
        title: "",
        img: null,
        status: 1
      }
    };
  },
  mixins: [],
  props: ["flag"],
  computed: {
    ...mapGetters({
      bannerInfo: "banner/bannerInfo"
    })
  },
  components: {},
  methods: {
    ...mapActions({
      reqBannerList: "banner/reqBannerList"
    }),
    // 取消
    cancel() {
      this.flag.isShow = false;
    },
    // 修改
    change() {
      this.flag.isShow = false;
      bannerEdit(this.form).then(res => {
        if (res.data.code == 200) {
          successAlert(res.data.msg);
          this.reqBannerList();
        }
      });
    },
    // 添加
    add() {
      this.flag.isShow = false;
      bannerAdd(this.form).then(res => {
        if (res.data.code == 200) {
          console.log(111);
          successAlert(res.data.msg);
          this.reqBannerList();
        }
      });
    },
    // 打开时
    opened() {
      if (!this.flag.isAdd) {
        this.form.id = this.bannerInfo.id;
        this.form.title = this.bannerInfo.title;
        this.form.status = this.bannerInfo.status;
        this.$refs.upload.imgUrl = this.$pre + this.bannerInfo.img;
      }
    },
    // 关闭时
    closed() {
      if (!this.flag.add) {
        this.clear();
      }
    },
    // 清空
    clear() {
      this.form = {
        title: "",
        img: null,
        status: 1
      };
      this.$refs.upload.imgUrl = "";
    },
    // 接收子组件传过来的文件
    sendFile(file) {
      this.form.img = file;
    }
  },
  mounted() {}
};
</script>
<style lang='less' scoped>
</style>